<template>
    <el-dialog class="zczyXdChange" title="中压注册线段变更" :visible.sync="show" v-if="show" width="70%" :before-close="handleCancel" :close-on-click-modal="false" v-dialogDrag>
        <el-scrollbar :style="'height:'+screenHeight+'px;'">
            <el-form :model="newForm" ref="newForm" :rules="newFormRules" label-width="150px" size="mini">
                <el-row>
                    <el-col :span="11">
                        <div class="title">变更前</div>
                        <el-form-item label="原线段编码">
                            <el-input v-model="oldForm.xdbm" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="原线段名称">
                            <el-input v-model="oldForm.xdmc" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="原电缆长度(km)">
                            <el-input v-model="oldForm.dlcd" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="原架空裸导线(km)">
                            <el-input v-model="oldForm.ldxcd" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="原架空绝缘线(km)">
                            <el-input v-model="oldForm.jyxcd" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="原线路合计(km)">
                            <el-input v-model="oldForm.xlhj" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="原电压等级(kV)">
                            <el-input v-model="oldForm.dydjm" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="原出线开关">
                            <el-input v-model="oldForm.cxkg" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="原地区特征码">
                            <el-input v-model="oldForm.dqtzm" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="原线段性质码">
                            <el-input v-model="oldForm.xlxzm" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="原开关设备台数">
                            <el-input v-model="oldForm.kgts" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="原断路器台数">
                            <el-input v-model="oldForm.dlqts" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="原电容器台数">
                            <el-input v-model="oldForm.drqts" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="原开闭所(室)数">
                            <el-input v-model="oldForm.kzss" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" class="center"></el-col>
                    <el-col :span="11">
                        <div class="title">变更后</div>
                        <el-form-item label="新线段编码" prop="xdbm">
                            <el-input v-model="newForm.xdbm"></el-input>
                        </el-form-item>
                        <el-form-item label="新线段名称" prop="xdmc">
                            <el-input v-model="newForm.xdmc"></el-input>
                        </el-form-item>
                        <el-form-item label="新电缆长度(km)" prop="dlcd">
                            <el-input v-model="newForm.dlcd"></el-input>
                        </el-form-item>
                        <el-form-item label="新新架空裸导线(km)" prop="ldxcd">
                            <el-input v-model="newForm.ldxcd"></el-input>
                        </el-form-item>
                        <el-form-item label="新空绝缘线(km)" prop="jyxcd">
                            <el-input v-model="newForm.jyxcd"></el-input>
                        </el-form-item>
                        <el-form-item label="新线路合计(km)">
                            <el-input v-model="xlhj" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="新电压等级(kV)" prop="dydjm">
                            <el-select v-model="newForm.dydjm" placeholder="请选择" @change="dydjChange">
                                <el-option v-for="item in dydjZyOptions" :key="item.value" :label="item.text" :value="item.value">
                                    <span class="txt">{{ item.text }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="新出线开关" prop="cxkg">
                            <el-select v-model="newForm.cxkg" placeholder="请选择">
                                <el-option v-for="item in cxkgOptions" :key="item.value" :label="item.text" :value="item.value">
                                    <span class="txt">{{ item.text }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="新地区特征码" prop="dqtzm">
                            <el-select v-model="newForm.dqtzm" placeholder="请选择" @change="dqtzChange">
                                <el-option v-for="item in dqtzOptions" :key="item.value" :label="item.text" :value="item.value">
                                    <span class="txt">{{ item.text }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="新线段性质码" prop="xlxzm">
                            <el-select v-model="newForm.xlxzm" placeholder="请选择" @change="xlxzChange">
                                <el-option v-for="item in xlxzOptions" :key="item.value" :label="item.text" :value="item.value">
                                    <span class="txt">{{ item.text }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="新开关设备台数" prop="kgts">
                            <el-input v-model="newForm.kgts"></el-input>
                        </el-form-item>
                        <el-form-item label="新断路器台数" prop="dlqts">
                            <el-input v-model="newForm.dlqts"></el-input>
                        </el-form-item>
                        <el-form-item label="新电容器台数" prop="drqts">
                            <el-input v-model="newForm.drqts"></el-input>
                        </el-form-item>
                        <el-form-item label="新开闭所(室)数">
                            <el-input v-model="newForm.kzss" prop="kzss"></el-input>
                        </el-form-item>
                        <el-form-item label="变更日期" prop="zcrq">
                            <el-date-picker v-model="newForm.zcrq" type="date" :picker-options="pickerDate" value-format="yyyy-MM-dd" placeholder="请选择" :clearable="false"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-scrollbar>
        <div slot="footer" class="dialog-footer">
            <el-button size="medium" @click="handleCancel">取 消</el-button>
            <el-button size="medium" type="primary" @click="handleSubmit">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { changeZczyXd, checkZczyXdbm } from '@/api/sjwh/zczy.js';
import { checkSpecialKey, DateDifference, floatAdd } from '@/utils/validate.js';
import { getDictCombo } from '@/api/tools/dict.js';
import { currentDate, getPreDate } from '@/utils/moment.js';
export default {
    data() {
        const that = this
        const checkXdbm = (rule, value, callback) => {
          if (value) {
            let reg = /^([\u4e00-\u9fa5]{2})([0-9]{3})([\s\S]{0,7})$/
            if (reg.test(value)) {
                if (checkSpecialKey(value)) {
                    let vo = {
                        dwbm: that.newForm.dwbm,
                        xdbm: that.newForm.xdbm,
                        zcrq: that.newForm.zcrq,
                        oid: that.newForm.id
                    }
                    checkZczyXdbm(vo).then(res => {
                        if (res.code == 0 && res.data) {
                            callback()
                        } else {
                            callback('线段编码重复')
                        }
                    })
                } else {
                    callback('禁止输入特殊字符')
                }
            } else {
                callback('2汉字+3数字+0~7字符')
            }
          } else {
            callback('请输入线段编码')
          }         
        }
        const checkXdmc = (rule, value, callback) => {
            if (value) {
                if (checkSpecialKey(value)) {
                    let vo = {
                        dwbm: that.newForm.dwbm,
                        xdmc: that.newForm.xdmc,
                        zcrq: that.newForm.zcrq,
                        oid: that.newForm.id
                    }
                    checkZczyXdbm(vo).then(res => {
                        if (res.code == 0 && res.data) {
                            that.xdmcRepeat = false
                        } else {
                            that.xdmcRepeat = true
                        }
                        callback()
                    })
                } else {
                    callback('禁止输入特殊字符')
                }
            } else {
                callback('请输入线段名称')
            }
        }
        const checkFourInteger = (rule, value, callback) => {
            let val = value + ''
            if (val) {
                if (/(^([1-9]{1})([0-9]{0,3})$)|(^0$)/.test(val)) {
                    callback()
                } else {
                    callback('1~4位数字且首位数不为0')
                }
            } else {
                if (rule.field == 'dlqts') {
                    callback('请输入断路器台数')
                }
                if (rule.field == 'drqts') {
                    callback('请输入电容器台数')
                }
                if (rule.field == 'kzss') {
                    callback('请输入开闭所(室)数')
                }
                if (rule.field == 'kgts') {
                    callback('请输入开关设备台数')
                }
            }
        }
        const checkXlcd = (rule, value, callback) => {
            let val = value + ''
            if (val) {
                let reg = /(^([1-9]{1})([0-9]{0,5})$)|(^([1-9]{1})([0-9]{0,5})[\.]{1}([0-9]{1,6})$)|(^0[\.]{1}[0-9]{1,6}$)|(^0$)/
                if (reg.test(val)) {
                    callback()
                } else {
                    callback('精度：整数6位，小数点后6位')
                }
            } else {
                if (rule.field == 'dlcd') {
                    callback('请输入电缆长度')
                }
                if (rule.field == 'ldxcd') {
                    callback('请输入架空裸导线长度')
                }
                if (rule.field == 'jyxcd') {
                    callback('请输入架空绝缘线长度')
                }
            }
        }
        const checkZcrq = (rule, value, callback) => {
          if (value) {
            if (DateDifference(value, that.oldForm.zcrq) < 2) {
                callback(`线段的变更日期须大于其注册日期(${that.oldForm.zcrq})2日`)
            } else {
                callback()
            }
          } else {
            callback('请选择变更日期')
          }         
        }
        return {
          show: false,
          oldForm: {
            xdbm: '',
            xdmc: '',
            dlcd: '',
            ldxcd: '',
            jyxcd: '',
            xlhj: '',
            dydj: '',
            dydjm: '',
            cxkg: '',
            dqtz: '',
            dqtzm: '',
            xlxz: '',
            xlxzm: '',
            kgts: '',
            dlqts: '',
            drqts: '',
            kzss: '',
            zcrq: ''
          },
          newForm: {
            xdbm: '',
            xdmc: '',
            dlcd: '',
            ldxcd: '',
            jyxcd: '',
            xlhj: '',
            dydj: '',
            dydjm: '',
            cxkg: '',
            dqtz: '',
            dqtzm: '',
            xlxz: '',
            xlxzm: '',
            kgts: '',
            dlqts: '',
            drqts: '',
            kzss: '',
            zcrq: '',
            id: '',
            czy: '',
            dwbm: '',
            dwmc: ''
          },
          newFormRules: {
            xdbm: [
                { required: true, validator: checkXdbm, trigger: 'blur' }
            ],
            xdmc: [
                { required: true, validator: checkXdmc, trigger: 'blur' }
            ],
            dydjm: [
                { required: true, message: '请选择电压等级', trigger: 'blur' }
            ],
            dqtzm: [
                { required: true, message: '请选择地区特征', trigger: 'blur' }
            ],
            ghtz: [
                { required: true, message: '请选择规划特征', trigger: 'blur' }
            ],
            zcrq: [
                { required: true, validator: checkZcrq, trigger: 'blur' }
            ],
            xlxzm: [
                { required: true, message: '请选择线段性质', trigger: 'blur' }
            ],
            dlcd: [
                { required: true, validator: checkXlcd, trigger: 'blur' },
            ],
            ldxcd: [
                { required: true, validator: checkXlcd, trigger: 'blur' }
            ],
            jyxcd: [
                { required: true, validator: checkXlcd, trigger: 'blur' }
            ],
            dlqts: [
                { required: true, validator: checkFourInteger, trigger: 'blur' }
            ],
            drqts: [
                { required: true, validator: checkFourInteger, trigger: 'blur' }
            ],
            kzss: [
                { required: true, validator: checkFourInteger, trigger: 'blur' }
            ],
            kgts: [
                { required: true, validator: checkFourInteger, trigger: 'blur' }
            ],
            cxkg: [
                {required: true, message: '请选择是否出线开关', trigger: 'blur'}
            ]
          },
          changeForm: {
            bglx: 'xdbg',
            zcZyxdsj: null,
            zcZyxdsjValidCxkgVO: {
              cxkg: '',
              dwbm: '',
              oid: '',
              xdbm: ''
            },
            zcZyyhsjValidXdZxrqVO: {
              dwbm: '',
              xdId: [],
              zxrq: ''
            },
            yxZytdxdValidXdZxrqVO: {
                dwbm: '',
                xdId: [],
                zxrq: ''
            }
          },
          dydjZyDict: 'dict_dydj_zy', // 电压等级字典分类值
          dqtzDict: 'dict_dqtz', // 地区特征字典分类值
          xlxzDict: 'dict_xlxz', // 线段性质字典分类值
          ghtzDict: 'dict_ghtz', // 规划特征字典分类值
          dydjZyOptions: [], // 电压等级下拉框数据
          dqtzOptions: [], // 地区特征下拉框数据
          xlxzOptions: [], // 线段性质下拉框数据
          ghtzOptions: [], // 规划特征下拉框数据
          cxkgOptions: [ // 出线开关下拉框数据
            {
                value: '0',
                text: '否'
            },
            {
                value: '1',
                text: '是'
            }
          ],
          screenHeight: 0, // 屏幕高度
          xdmcRepeat: false, // 线段名称是否重复
          pickerDate: { // 变更日期选择不能超过当前日期
            disabledDate: time => {
                return (
                    time.getTime() > new Date()
                );
            }
          }
        }
    },
    props: {
      propChangeData: {
        type: Object,
        default: function() {
          return {};
        }
      }
    },
    watch: {
      propChangeData: {
        deep: true,
        handler(newVal, oldVal) {
          if (newVal.show) {
            const that = this
            that.show = newVal.show
            that.oldForm = {
                xdbm: newVal.obj.xdbm,
                xdmc: newVal.obj.xdmc,
                dlcd: newVal.obj.dlcd,
                ldxcd: newVal.obj.ldxcd,
                jyxcd: newVal.obj.jyxcd,
                xlhj: newVal.obj.xlhj,
                dydj: newVal.obj.dydj,
                dydjm: newVal.obj.dydjm,
                cxkg: newVal.obj.cxkg,
                dqtz: newVal.obj.dqtz,
                dqtzm: newVal.obj.dqtzm,
                xlxz: newVal.obj.xlxz,
                xlxzm: newVal.obj.xlxzm,
                kgts: newVal.obj.kgts,
                dlqts: newVal.obj.dlqts,
                drqts: newVal.obj.drqts,
                kzss: newVal.obj.kzss,
                zcrq: newVal.obj.zcrq
            }
            that.newForm = {
                xdbm: newVal.obj.xdbm,
                xdmc: newVal.obj.xdmc,
                dlcd: newVal.obj.dlcd,
                ldxcd: newVal.obj.ldxcd,
                jyxcd: newVal.obj.jyxcd,
                xlhj: newVal.obj.xlhj,
                dydj: newVal.obj.dydj,
                dydjm: newVal.obj.dydjm,
                cxkg: newVal.obj.cxkg,
                dqtz: newVal.obj.dqtz,
                dqtzm: newVal.obj.dqtzm,
                xlxz: newVal.obj.xlxz,
                xlxzm: newVal.obj.xlxzm,
                kgts: newVal.obj.kgts,
                dlqts: newVal.obj.dlqts,
                drqts: newVal.obj.drqts,
                kzss: newVal.obj.kzss,
                zcrq: currentDate(),
                id: newVal.obj.id,
                czy: newVal.obj.czy,
                dwbm: newVal.obj.dwbm,
                dwmc: newVal.obj.dwmc
            }
            that.changeForm.zcZyxdsjValidCxkgVO.oid = newVal.obj.id
            that.changeForm.zcZyxdsjValidCxkgVO.dwbm = newVal.obj.dwbm
            that.changeForm.zcZyyhsjValidXdZxrqVO.xdId = [newVal.obj.id]
            that.changeForm.zcZyyhsjValidXdZxrqVO.dwbm = newVal.obj.dwbm
            that.changeForm.yxZytdxdValidXdZxrqVO.xdId = [newVal.obj.id]
            that.changeForm.yxZytdxdValidXdZxrqVO.dwbm = newVal.obj.dwbm
          }
        }
      }
    },
    computed: {
        xlhj() {
            const that = this
            let xlhj = 0
            if (that.newForm.dlcd) {
                xlhj = floatAdd(xlhj, parseFloat(that.newForm.dlcd))
            }
            if (that.newForm.ldxcd) {
                xlhj = floatAdd(xlhj, parseFloat(that.newForm.ldxcd))
            }
            if (that.newForm.jyxcd) {
                xlhj = floatAdd(xlhj, parseFloat(that.newForm.jyxcd))
            }
            return xlhj
        }
    },
    mounted() {
        const that = this
        let pam1 = {typeCode: that.dydjZyDict}
        let pam2 = {typeCode: that.dqtzDict}
        let pam3 = {typeCode: that.xlxzDict}
        let pam4 = {typeCode: that.ghtzDict}
        let res1 = getDictCombo(pam1)
        let res2 = getDictCombo(pam2)
        let res3 = getDictCombo(pam3)
        let res4 = getDictCombo(pam4)
        Promise.all([res1, res2, res3, res4]).then(result => {
            that.dydjZyOptions = result[0].data
            that.dqtzOptions = result[1].data
            that.xlxzOptions = result[2].data
            that.ghtzOptions = result[3].data
        }).catch(reason => {
            console.log(reason)
        })
        that.screenHeight = (document.documentElement.clientHeight || document.body.clientHeight) * 0.6
        window.addEventListener('resize', that.onResize)
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.onResize)
    },
    methods: {
      /* 取消 */
      handleCancel() {
        const that = this
        that.show = false
        that.changeForm = {
          bglx: 'xdbg',
          zcZyxdsj: {
            dwbm: '',
            dwmc: '',
            zcrq: '',
            id: '',
            czy: ''
          },
          zcZyxdsjValidCxkgVO: {
            cxkg: '',
            dwbm: '',
            oid: '',
            xdbm: ''
          },
          zcZyyhsjValidXdZxrqVO: {
            dwbm: '',
            xdId: [],
            zxrq: ''
          },
          yxZytdxdValidXdZxrqVO: {
            dwbm: '',
            xdId: [],
            zxrq: ''
          }
        }
        that.oldDwbm = ''
        that.oldDwmc = ''
      },

      /* 确定 */
      handleSubmit() {
        const that = this
        that.$refs['newForm'].validate(valid => {
            if (valid) {
                let obj1 = {
                    xdbm: that.oldForm.xdbm,
                    xdmc: that.oldForm.xdmc,
                    dlcd: that.oldForm.dlcd,
                    ldxcd: that.oldForm.ldxcd,
                    jyxcd: that.oldForm.jyxcd,
                    xlhj: that.oldForm.xlhj,
                    dydj: that.oldForm.dydj,
                    dydjm: that.oldForm.dydjm,
                    cxkg: that.oldForm.cxkg,
                    dqtz: that.oldForm.dqtz,
                    dqtzm: that.oldForm.dqtzm,
                    xlxz: that.oldForm.xlxz,
                    xlxzm: that.oldForm.xlxzm,
                    kgts: that.oldForm.kgts,
                    dlqts: that.oldForm.dlqts,
                    drqts: that.oldForm.drqts,
                    kzss: that.oldForm.kzss,
                }
                let obj2 = {
                    xdbm: that.newForm.xdbm,
                    xdmc: that.newForm.xdmc,
                    dlcd: that.newForm.dlcd,
                    ldxcd: that.newForm.ldxcd,
                    jyxcd: that.newForm.jyxcd,
                    xlhj: that.newForm.xlhj,
                    dydj: that.newForm.dydj,
                    dydjm: that.newForm.dydjm,
                    cxkg: that.newForm.cxkg,
                    dqtz: that.newForm.dqtz,
                    dqtzm: that.newForm.dqtzm,
                    xlxz: that.newForm.xlxz,
                    xlxzm: that.newForm.xlxzm,
                    kgts: that.newForm.kgts,
                    dlqts: that.newForm.dlqts,
                    drqts: that.newForm.drqts,
                    kzss: that.newForm.kzss,
                }
                if (that.isObjEqual(obj1, obj2)) {
                    that.$message.warning('请至少变更一项数据')
                    return false
                }
                if (that.xdmcRepeat) {
                    that.$confirm('线段名称重复, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        that.xlhjConfirm()
                    }).catch(() => {
                        console.log('已取消')         
                    });
                } else {
                    that.xlhjConfirm()
                }
            }
        })
      },
      xlhjConfirm() {
        const that = this
        that.newForm.xlhj = that.xlhj
        if (that.xlhj == 0) {
            that.$confirm('线路合计长度为0, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.changeZczyXd()
            }).catch(() => {
                console.log('已取消')         
            }); 
        } else {
            that.changeZczyXd()
        }
      },
      async changeZczyXd() {
        const that = this
        that.changeForm.zcZyxdsj = that.newForm
        that.changeForm.zcZyxdsjValidCxkgVO.cxkg = that.newForm.cxkg
        that.changeForm.zcZyxdsjValidCxkgVO.xdbm = that.newForm.xdbm
        that.changeForm.zcZyyhsjValidXdZxrqVO.zxrq = getPreDate(that.newForm.zcrq)
        that.changeForm.yxZytdxdValidXdZxrqVO.zxrq = getPreDate(that.newForm.zcrq)
        return false
        let res = await changeZczyXd(that.changeForm)
        if (res.code == 0 && res.data) {
            that.$message.success('中压注册线段变更成功')
            that.handleCancel()
            that.$emit("updateZczyXdTable")
        } else {
            that.$message.error(res.message)
        }
      },
      isObjEqual(o1,o2){
        let props1 = Object.getOwnPropertyNames(o1)
        let props2 = Object.getOwnPropertyNames(o2)
        if (props1.length != props2.length) {
            return false
        }
        for (let i = 0, max = props1.length; i < max; i++) {
            let propName = props1[i]
            if (o1[propName] !== o2[propName]) {
                return false
            }
        }
        return true
      },

      /* 选择线段性质 */
        xlxzChange(val) {
            const that = this
            that.xlxzOptions.forEach(item => {
                if (item.value == val) {
                    that.newForm.xlxz = item.text
                }
            })
        },
        /* 选择电压等级 */
        dydjChange(val) {
            const that = this
            that.dydjZyOptions.forEach(item => {
                if (item.value == val) {
                    that.newForm.dydj = item.text
                }
            })
        },
        /* 选择地区特征 */
        dqtzChange(val) {
            const that = this
            that.dqtzOptions.forEach(item => {
                if (item.value == val) {
                    that.newForm.dqtz = item.text
                }
            })
        },

      /* 屏幕缩放 */
      onResize() {
        this.screenHeight = (document.documentElement.clientHeight || document.body.clientHeight) * 0.6
      }
    }
}
</script>
<style lang="scss" scoped>
.zczyXdChange /deep/ .el-input-number {
  width: 100%;
}
.zczyXdChange /deep/ .el-input-number .el-input__inner {
  text-align: left;
}
.zczyXdChange /deep/ .el-date-editor.el-input {
    width: 100%;
}
/deep/ .el-dialog__header {
  padding: 4px 10px 4px;
}
/deep/ .el-dialog__headerbtn {
  top: 10px;
}
/deep/.el-table--scrollable-x .el-table__body-wrapper {
  z-index: 1;
}
/deep/ .el-dialog__footer {
  padding: 5px 10px 5px;
}
.selectDwbm {
  padding-left: 10px;
}
.selectDwbm /deep/ .el-button--primary {
  width: 100%;
}    
.title {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 24px;
}
.center {
    height: 1px;
}
/deep/ .el-dialog__body {
    padding: 10px 20px 1px;
}
/deep/ .el-scrollbar__wrap {
    overflow-y: auto;
    overflow-x: hidden;
}
// /deep/ .el-scrollbar__thumb {background: transparent;}
.zczyXdChange /deep/ .el-select {
    width: 100%;
}
</style>
